﻿@page "/chart/performance"

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Buttons
@using ThemeHelper

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>  This sample demonstrates the performance of Blazor chart to render 100K points. </p>
</SampleDescription>
<ActionDescription>
    <p>  Chart includes several data rendering optimizations to achieve the best possible performance when plotting large volumes of data as well as handling high frequency real-time data. In this demo, line series is rendered with 100K points. </p>
</ActionDescription>

<style>
    #button {
        margin-left: 3.5%;
    }

    #information {
        margin-top: 1.5%;
        float: right;
        font-size: initial;
        margin-right: 1%;
    }

    #performance {
        margin-top: 0.5%;
    }

</style>

<div class="control-section">

    <div class="content-wrapper">
        <div class="row">
            <span id="button">
                <SfButton CssClass="e-info" IsPrimary="true" @onclick="LoadPoints">Load 100K Points</SfButton>
            </span>
            <span id="information">
                Time Taken : <b>@timediff</b>
            </span>
            <br />
        </div>

        <div class="row">
            <SfChart ID="performance" @ref="chartInstance" Theme="@theme">
                <ChartPrimaryXAxis>
                    <ChartAxisMajorGridLines Width="0"></ChartAxisMajorGridLines>
                </ChartPrimaryXAxis>
                <ChartLegendSettings Visible="false"></ChartLegendSettings>
                <ChartSeriesCollection>
                    <ChartSeries Name="Series" XName="@nameof(LineChartData.XValue)" YName="@nameof(LineChartData.YValue)" DataSource="@chartPoints">
                        <ChartSeriesAnimation Enable="false"></ChartSeriesAnimation>
                    </ChartSeries>
                </ChartSeriesCollection>
                <ChartEvents Loaded="ChartLoaded"></ChartEvents>
            </SfChart>
        </div>

    </div>

</div>

@code{

    private DateTime start;
    private double value = 0;
    private bool isPointsLoaded;
    private SfChart chartInstance { get; set; }
    private string timediff { get; set; } = "0 ms";
    private Random randomNum { get; set; } = new Random();
    private List<LineChartData> chartPoints { get; set; } = new List<LineChartData>();
    private Syncfusion.Blazor.Theme theme { get; set; }

    protected override void OnInitialized()
    {
        theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    private async Task LoadPoints()
    {
        chartPoints.Clear();
        for (int pts = 0; pts < 100000; pts++)
        {
            if (pts % 3 == 0)
            {
                this.value -= (randomNum.Next(0, 100) / 3) * 4;
            }
            else if (pts % 2 == 0)
            {
                this.value += (randomNum.Next(0, 100) / 3) * 4;
            }
            chartPoints.Add(new LineChartData() { XValue = pts, YValue = this.value });
        }
        isPointsLoaded = true;
        start = DateTime.Now;
        await chartInstance.RefreshAsync();
    }

    private void ChartLoaded(LoadedEventArgs args)
    {
        if (!isPointsLoaded)
            return;
        timediff = Math.Round((DateTime.Now - start).TotalMilliseconds).ToString() + " ms";
        isPointsLoaded = false;
        StateHasChanged();
    }

    public class LineChartData
    {
        public double XValue { get; set; }
        public double YValue { get; set; }
    }
}


